<template>
  <intro-view :usage="usage">
    <div ref="page">
      <button @click="showActionSheet">show action sheet</button>
    </div>
  </intro-view>
</template>

<script>
  import usage from './usage.md'
  export default {
    data() {
      return {
        usage
      }
    },
    methods: {
      showActionSheet () {
        this.$UiActionSheetDialog.new({
          onEl: this.$refs['page'],
          items: [{
            text: 'Action One',
            css: {color: '#f00'}
          }, {
            text: 'Action Two',
            disabled: true
          }, {
            text: 'Action Three'
          }, {
            text: 'Action Four',
            hidden: true
          }],
          cancel: {
            text: '默认取消',
            // 隐藏取消按钮
            // hidden: true
          },
          callback: (item) => { console.log('关闭回调', item) }
        })
      }
    }
  }
</script>
